<template>
  <view class="mode">
    <view class="mode-content">
      <image class="icon" :src="oss2('funCard/error_icon.png')" />

      <view v-if="type === 'address'">
        <view class="status">提交失败</view>
        <view class="reason">
          因冷链商品特殊性，您提交的地址在区域限购内，建议您更换地址或联系客服处理
        </view>
        <view class="bottom_btn">
          <button class="rule_kefu" open-type="contact" @click.stop="onlineKf">
            <view>
              <image :src="oss2('funCard/order_service.png')" />联系客服
            </view>
          </button>
          <view @click="toReview">
            <image :src="oss2('funCard/icon_review.png')" />重新填写
          </view>
        </view>
      </view>

      <view v-else>
        <view>{{ errorText }}</view>
        <view>请重新上传</view>
        <view class="btn" @click.stop="toReset">确定</view>
      </view>

      <image
        class="close"
        @click.stop="toClose"
        :src="oss2('funCard/popup_close.png')"
      />
    </view>
  </view>
</template>

<script setup>
import { oss2 } from "@/utils/utils";
import { defineProps, defineEmits, watch } from "vue";

const emits = defineEmits(["close"]);
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  errorText: {
    type: String,
    default: "",
  },
});
watch(
  () => props.type,
  () => {
    console.log("监听porps", props.type);
  },
  {
    immediate: true, // 这个属性是重点啦
  }
);

const toReset = () => {
  getApp().emdlz2(
    "track",
    "event",
    "fc_my_orders",
    "click",
    errorText == "您上传的图片审核不通过"
      ? "fc_failed_cover"
      : "fc_failed_words",
    ""
  );
  emits("close");
};
const onlineKf = () => {
  getApp().emdlz2(
    "track",
    "event",
    "fc_submit_address",
    "click",
    "fc_popup_service",
    ""
  );
};
const toReview = () => {
  getApp().emdlz2(
    "track",
    "event",
    "fc_submit_address",
    "click",
    "fc_popup_refill",
    ""
  );
  emits("close");
};
const toClose = () => {
  if (props.type === "address") {
    getApp().emdlz2(
      "track",
      "event",
      "fc_submit_address",
      "click",
      "fc_popup_close",
      ""
    );
  }
  emits("close");
};
</script>

<style lang="less" scoped>
.mode {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.7);
  .mode-content {
    width: 315px;
    height: 256px;
    background: #ffffff;
    border-radius: 6px;
    position: absolute;
    top: calc(50vh - 189px);
    left: 30px;
    box-sizing: border-box;
    padding: 43px 27px 0;
    text-align: center;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #747474;
    line-height: 18px;
    .icon {
      width: 60px;
      height: 60px;
      margin-bottom: 18px;
    }
    .btn {
      width: 151px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background: #0044c9;
      border-radius: 18px;
      margin: 0 auto;
      margin-top: 20px;
      font-size: 18px;
      color: #ffffff;
    }
    .close {
      width: 25px;
      height: 25px;
      position: absolute;
      bottom: -46px;
      left: 146px;
    }
    .status {
      height: 24px;
      line-height: 24px;
      font-size: 24px;
      font-weight: bold;
      color: #000000;
      margin-bottom: 15px;
    }
    .reason {
      font-size: 12px;
      font-weight: 400;
      color: #747474;
      line-height: 20px;
    }
    .bottom_btn {
      margin-top: 35px;
      width: 100%;
      height: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      .rule_kefu {
        width: 62px;
        margin-right: 27px;
        margin-left: 0;
        padding: 0;
        background-color: transparent;
        &::after {
          border: none;
        }
      }
      view {
        display: flex;
        align-items: center;
        width: 60px;
        height: 13px;
        line-height: 13px;
        box-sizing: border-box;
        border-bottom: 1px solid #0044c9;
        font-size: 11px;
        font-weight: 400;
        color: #0044c9;
        image {
          width: 10px;
          height: 10px;
          margin-right: 3px;
        }
      }
    }
  }
}
</style>
